<template>
	<view class="container">

		<zero-custom-bar :capsuleLeftWidth="1000">
			<template v-slot:left>
			    <view class="left title">
					{{ schoolName }}
					<image class="left switch-icon" src="@/static/switch.png"></image>
				</view>
			    
			 </template>
		</zero-custom-bar>


		<!-- 统计信息 -->
		<view class="stats">
			<view class="stat-item">
				<navigator url="/pages/classList/classList">
					<text class="stat-number">5</text>
				</navigator>
				<text class="stat-label">课堂续课提醒</text>
				
			</view>
			<view v-if="role & 1 > 0" class="stat-item">
				<navigator url="/pages/follow/follow">
					<text class="stat-number">2</text>
				</navigator>
				<text class="stat-label">待跟进</text>
			</view>
			<view v-if="role & 2 > 0" class="stat-item">
				<navigator url="/pages/classList/classList">
					<text class="stat-number">2</text>
				</navigator>
				<text class="stat-label">待上课班级</text>
			</view>
		</view>

		<!-- 教务中心 -->
		<view class="section">
			<view class="section-title">教务中心</view>
			<view class="section-content">
				<view class="grid">
					<view class="grid-item" v-for="(item, index) in listItems" :key="index">
						<navigator class="grid-nav" :url="item.url">
							<image class="icon" :src="item.icon"></image>							
							<text class="grid-label">{{ item.label }}</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				schoolName: "",
				role: 0,
				listItems: [{
					type: 1,
					url: '/pages/clue/clue',
					icon: '/static/切图 1.png',
					label: '线索管理'
				},{
					type: 1,
					url: '/ppages/follow/follow',
					icon: '/static/切图 2.png',
					label: '今日待跟进',
				},{
					type: 1,
					url: '/pages/trail/trail',
					icon: '/static/切图 3.png',
					label: '跟进管理'
				},{
					type: 3,
					url: '/pages/feesWarning/feesWarning',
					icon: '/static/切图 4.png',
					label: '续课预警'
				},{
					type: 2,
					url: '/pages/call/call',
					icon: '/static/组 464@1x.png',
					label: '点名'
				},{
					type: 2,
					url: '/pages/course/schedule/schedule',
					icon: '/static/组 467@1x.png',
					label: '课表'
				},{
					type: 2,
					url: '/pages/assignment/assignment',
					icon: '/static/组 470@1x.png',
					label: '课后作业'
				},{
					type: 3,
					url: '/pages/student/student',
					icon: '/static/切图 7.png',
					label: '学员'
				},{
					type: 2,
					url: '/pages/class/list/list',
					icon: '/static/组 478@1x.png',
					label: '班级'
				},
				],
			};
		},
		onLoad: function() {
			
			this.schoolName = uni.getStorageSync("school_name")
			let role = uni.getStorageSync("role");
			this.role = role;
			this.listItems = this.listItems.filter(it => it.type & role);
		},
		methods: {
			
		}
	};
</script>


<style>
	.container {
		width: 100%;
		height: 100vh;
		/* padding: 10px; */
		background-image: url(@/static/切图 5.png);
		background-repeat: no-repeat;
		background-size: contain;
	}

	.header {
		padding-top: 15%;
		padding-left: 40rpx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		margin-left: 32rpx;
	}

	.switch-icon {
		width: 42rpx;
		height: 24rpx;
		
	}

	.stats {
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin-top: 100rpx;
		margin-left: 5%;
		width: 90%;
		height: 160rpx;
		border-radius: 8rpx;
		border: 1rpx solid #ddd;
		background-color: #fff;

	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 28rpx;
	}

	.stat-number {
		font-size: 48rpx;
		font-weight: bold;
	}

	.stat-label {
		font-size: 28rpx;
		color: #888;
	}

	.section {
		width: 90%;
		margin-top: 32rpx;
		margin-left: 5%;

	}

	.section-title {
		font-size: 32rpx;
		margin-bottom: 32rpx;
	}

	.section-content {
		border: 1rpx solid #ddd;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
	}

	.grid-item {
		width: 25%;
		margin-top: 28rpx;
		margin-bottom: 28rpx;
	}
	
	.grid-nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grid-label {
		font-size: 30rpx;
		margin-top: 10rpx;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
		/* margin-left: 20rpx; */
	}
</style>